<script setup>
import { ref, nextTick } from 'vue'
import api from '@/api'
import uploadImage from '@/components/uploadImage.vue'
import { Modal } from '@arco-design/web-vue'

const emit = defineEmits(['close'])

const listLoading = ref(false)
const listData = ref([])
const getListData = async (page = 1) => {
  listLoading.value = true
  try {
    listData.value = await api.get(
      `departments/${department.value.id}/collections`
    )
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const department = ref(null)
const visible = ref(false)

const show = (item) => {
  department.value = item
  formData.value.department_id = item.id
  visible.value = true
  getListData()
}

defineExpose({ show })

const formRef = ref()
const formVisible = ref()
const formItem = ref()
const formLoading = ref()
const formData = ref({
  department_id: '',
  name: '',
  image: '',
})
const formRules = {
  name: [
    {
      required: true,
      message: '请填写板块名称',
    },
  ],
  image: [
    {
      required: true,
      message: '请上传板块图标',
    },
  ],
}
const formSubmit = async () => {
  if (await formRef.value.validate()) {
    return false
  }

  formLoading.value = true

  try {
    if (formItem.value) {
      await api.put('collections/' + formItem.value.id, formData.value)
    } else {
      await api.post('collections', formData.value)
    }
    formRef.value?.resetFields()
    formVisible.value = false
    getListData()
  } catch (error) {
    console.error(error)
  }

  formLoading.value = false

  return false
}
const create = () => {
  formRef.value?.resetFields()
  formItem.value = null
  formVisible.value = true
}

const update = (item) => {
  formRef.value?.resetFields()
  formItem.value = item
  formData.value.name = item.name
  formData.value.image = item.image
  formVisible.value = true
}

const del = (item) => {
  Modal.confirm({
    title: '删除',
    content: '您确定要删除吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      await api.delete('collections/' + item.id)

      getListData()
    },
  })
}
</script>

<template>
  <a-modal
    v-model:visible="visible"
    title="板块设置"
    :footer="false"
    width="600px"
    body-style="padding:0"
    @before-close="emit('close')"
  >
    <div class="header">
      <a-space>
        <a-button type="primary" @click="create">添加板块</a-button>
      </a-space>
    </div>
    <a-table
      :loading="listLoading"
      @page-change="getListData"
      class="table"
      :data="listData"
      :pagination="false"
    >
      <template #columns>
        <a-table-column title="序号" :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="板块图标" :width="200">
          <template #cell="{ record }">
            <div class="cell-img">
              <img :src="record.image" />
            </div>
          </template>
        </a-table-column>
        <a-table-column title="板块名称" data-index="name"></a-table-column>
        <a-table-column align="right" :width="88">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="mini" @click="update(record)">
                编辑
              </a-button>
              <a-button
                type="primary"
                status="danger"
                size="mini"
                @click="del(record)"
              >
                删除
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>

  <a-modal
    v-model:visible="formVisible"
    :title="(formItem ? '编辑' : '添加') + '板块'"
    :ok-loading="formLoading"
    :on-before-ok="formSubmit"
  >
    <a-form ref="formRef" :model="formData" :rules="formRules">
      <a-form-item
        field="image"
        label="图标"
        help="请上传jpg、png、gif格式图片、文件大小不能超过1MB"
        validate-trigger="input"
      >
        <uploadImage
          v-model="formData.image"
          width="100px"
          height="100px"
        ></uploadImage>
      </a-form-item>
      <a-form-item field="name" label="名称">
        <a-input v-model="formData.name" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style lang="scss" scoped>
.header {
  padding: 10px;
}
.cell-img {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
}
</style>
